<template>
  <view style="height:100vh;">
    <navbar fixed @clickLeft="toHome" leftIcon="left" title="转账" shadow></navbar>

    <view class="view flex-row align-center p-l-25 p-r-15 h82 justify-between bg-fff m-t-10 m-b-10">
        <view class="flex-1">
            <view class="c_31b fz-14">收款地址</view>
            <uni-easyinput :inputBorder="false" v-model="address"  placeholder="输入或粘贴钱包地址" class="us-input"></uni-easyinput>
        </view>
        <!--<image src="/static/img1/front page_icon_wallet_default.png" class="w30 h24"/>-->
    </view>

    <view class="view p-l-25 p-r-15 bg-fff m-b-12">
        <view class="view b-b-1 p-t-15 p-b-15">
            <view class="view flex-row align-center justify-between">
                <view class="c_31b fz-14 m-b-5">转出数量</view>
                 <view class="m-b-5 view flex-row align-center" @click="choseToken()">
                    <view class="c_31b fz-14">{{transferToken}}</view>
                    <image src="/static/img1/mywallet_icon_more_default.png" class="w25 h25"/>
                </view>
            </view>

            <view class="view flex-row align-center justify-between">
                <uni-easyinput :inputBorder="false" v-model="transferAmount"  placeholder="输入转出金额" class="us-input"></uni-easyinput>
                <view @click="typeAll" class="c-c4 b--all-1 text-center w80" style="border-radius: 15px;">全部</view>
            </view>
        </view>
        <view class="view flex-row align-center justify-between h54">
            <view class="c_31b fz-14">钱包余额</view>
            <view class="c-c4 fz-12">{{balance}}</view>
        </view>
    </view>

    <view class="view p-l-25 p-r-15 bg-fff m-b-1">
		<view class="view flex-row align-center justify-between h54">
		    <view class="c_31b fz-14">Gas</view>
		    <view class="c-c4 fz-12">{{fee()}}</view>
		</view>
        <!--<view class="h57 view flex-row align-center c_3c3 b-b-1 p-l-15">Gas</view>
        <view class="view flex-row align-center justify-center m-l-10 m-r-10 p-b-12">
            <view class="b--all-1 view align-center justify-center flex-1 m-r-10 rel active" style="border-radius: 8px;">
                <view class="view align-center justify-center ">
                    <view style="border-radius: 0px 8px 0px 8px;background:#6781FF;" class="view justify-center align-cneter right-set">
                        <uni-icons type="checkmarkempty" size="10" color="#fff"></uni-icons>
                    </view>
                    <view class="c_3c3 fz-14 m-b-9 m-t-8">慢</view>
                    <view class="c-c4 fz-10 p-l-5 p-r-5 m-b-11 text-center">0.000105 CHB ≈ ¥ 0.0386</view>
                </view>
                
                <view class=" h24 width100 boc text-center fz-12 view align-center justify-center" style="border-top:1px solid #EDEDED;color:#C4C4C4;">
                    ≈ 3 秒
                </view>
            </view>

             <view class="b--all-1 view align-center justify-center flex-1 m-r-10" style="border-radius: 8px;">
                <view class="view align-center justify-center">
                    <view class="c_3c3 fz-14 m-b-9 m-t-8">推荐</view>
                    <view class="c-c4 fz-10 p-l-5 p-r-5 m-b-11 text-center">0.000105 CHB ≈ ¥ 0.0386</view>
                </view>
                
                <view class=" h24 width200" style="border-top:1px solid #EDEDED;color:#C4C4C4;">
                    ≈ 2 秒
                </view>
            </view>

             <view class="b--all-1 view align-center justify-center flex-1 m-r-10" style="border-radius: 8px;">
                <view class="view align-center justify-center">
                    <view class="c_3c3 fz-14 m-b-9 m-t-8">快</view>
                    <view class="c-c4 fz-10 p-l-5 p-r-5 m-b-11 text-center">0.000105 CHB ≈ ¥ 0.0386</view>
                </view>
                
                <view class=" h24 width200" style="border-top:1px solid #EDEDED;color:#C4C4C4;">
                    ≈ 1 秒
                </view>
            </view>

             <view class="b--all-1 view align-center justify-center flex-1 h124" style="border-radius: 8px;">
                自定义
            </view>

        </view>
        <view class="h52 view flex-row align-center justify-between">
            <view></view>
            <view class="view flex-row align-center m-r-10">
                <view class="c_678 fz-12">高级功能</view>
                <image src="/static/img1/mywallet_icon_more_default.png" class="w20  h20"/>
            </view>
        </view>-->
    </view>
    <view class="p-l-20 p-r-20 m-t-50">
        <el-button @click="transferPassword" class="btn-c width100 h50 view align-center justify-center" block style="border-radius: 12px !important;font-size:32rpx;display:flex !important;" type="primary">确认转账</el-button>
    </view>
	<PasswordPopup ref="passwordPopup"/>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import navbar from "@/components/uni-nav-bar";
import uniIcons from "@/components/uni-icons/uni-icons"
import uniEasyinput from "@/components/uni-easyinput/uni-easyinput"
import {getTokenBalance} from "@/apis/bsc20.js";
import {getConfig} from "@/apis/wallet.js"
import {sendTransfer} from "@/apis/transfer.js"
import { aboutWallet } from "@/common/businessCommon";
import PasswordPopup from "@/components/PasswordPopup";

export default {
  components: {
    navbar,
    uniIcons,
    uniEasyinput,
	PasswordPopup
  },
  data() {
    return {
	  address:"",
	  balance: 0,
	  transferAmount: 0,
	  transferToken: "CHB",
	  contractAddress: "",
	  config:{},
      items: [
        { name: "已完成", key: 0 },
        { name: "已作废", key: 1 },
      ],
      showSelect: false,
    };
  },

  mounted() {
    //this.getList(true);
  },
  onLoad (options) {
    const { address } = options
    if (address) {
      this.address = address;
    }
     
  },
  computed:{
      ...mapState(['walletList', 'defaultWallet']),
  },
  async onShow(){
	  let token = 'CHB'
	  await this.useConfig();
	  this.getContract(token);
	  await this.getNowBalance(token);
  },
  methods: {
	typeAll(){
		this.transferAmount = this.balance;
	},
	toHome(){
		uni.reLaunch({
		    url: '/pages/home/index',
		});
	},
	fee(){
		if(!this.config.transfer_fee){
			return '2 CHB';
		}
		return this.config.transfer_fee + ' ' + this.config.transfer_token;
	},
	getContract(token){
		if(!this.config.contract){
			return '0x7286283a07b198473538D58C6270966B0228F6eb';
		}
		this.contractAddress = this.config.contract[token];
	},
	async realSend(){
		
	},
	async transferPassword(){
		this.$refs.passwordPopup.showPasswordPopup({
			cancel: () => {
		
			},
			success: async (password) => {
				//let walletAddress = this.defaultWallet.address;
				let walletInfo = await aboutWallet.getWalletInfo(this.defaultWallet.address, password);
				let send = await sendTransfer({
					'key': walletInfo.privateKey,
					'to' : this.address ,
					'amount': this.transferAmount,
					'token' : this.transferToken
				})
				if(send){
					uni.showToast({
						title: '转出成功，预计将在5分钟内到账，请耐心等待',
						icon: 'none'
					})
					let that = this;
					setTimeout(function(){
						that.toHome();
					},2000);
					
				}
			},
			fail: () => {
		
			},
		});
	},
	async useConfig(){
		let c = await getConfig();
		this.config = c.data;
		console.log('config',this.config);
	},
	async getNowBalance(token){
		let amount = await getTokenBalance(this.defaultWallet.address, token);
		if(amount.data){
			this.balance = amount.data.amount;
		}
	},
	async choseToken(){
		await uni.showActionSheet({
			title: '选择转账币种',
			itemList: ['CHB', 'DSX', 'YPT'],
			popover: {
				
			},
			success: e => {
				let token = "CHB"
				switch(e.tapIndex){
					case 0: token = "CHB";break;
					case 1: token = "DSX";break;
					case 2: token = "YPT";break;
				}
				this.getNowBalance(token);
				this.getContract(token);
				this.transferToken = token;
				console.log(this.contractAddress);
				/*uni.showToast({
					title: '点击了第' + e.tapIndex + '个选项',
					icon: 'none'
				});*/
			}
		});
	}
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f6f6f6;
  box-sizing: border-box;
  overflow-y: hidden;
}
.right-set {
    position: absolute;
    right: 0;
    top: 0;
    width: 40rpx;
    height: 24rpx;
    display: none;
}
::v-deep .us-input {
     .uni-easyinput__content-input {
        
        padding-left:  0 !important;
    }
}

.b-b-1 {border-bottom: 1px solid #EDEDED;}
.b--all-1 {border: 1px solid #C4C4C4;}
.bo {
  border: 2px solid #343438;
}
.us-input {width: 100%;border-bottom: 0px;}
.show-detail {
  border-radius: 60rpx;
}
/deep/.auto-h {
  height: calc(100vh - 220rpx) !important;
}
.autoH {
  height: calc(100vh - 220rpx);
}
.bor-line {
  width: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    #ffffff 50%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0.3;
  height: 1px;
}
.active {
    border-color: #6781FF !important;
    .boc {border-color: #6781FF !important;background: #6781FF;color: #fff !important;}
    .right-set {display: flex;}
}
/deep/.auto-h {
  height: calc(100vh - 90rpx) !important;
}
.bgs {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
</style>
